<template>
  <el-card shadow="never">
    <div slot="header" class="card-header">
      <div class="card-title">
        <i class="el-icon-star-on"></i>
        <strong>重点模型</strong>
      </div>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-star-off"></i>
          送审工作量和核定工作量比例超出正常阈值
        </span>
        <el-table :data="tableDataA" border style="width: 100%">
          <el-table-column prop="columnA" label="统计时间（季度）">
          </el-table-column>
          <el-table-column prop="columnB" label="单个季度的“cosmic送审功能点“">
          </el-table-column>
          <el-table-column prop="columnC" label="实际工作量"> </el-table-column>
          <el-table-column prop="columnD" label="超出正常范围">
          </el-table-column>
          <el-table-column prop="columnE" label="是否高于20%">
          </el-table-column>
          <el-table-column prop="columnF" label="疑似送审工作量虚报">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Pagination />
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-star-off"></i>
          cosmic发起结算工作量与任务单填报工作量不一致
        </span>
        <el-table :data="tableDataB" border style="width: 100%">
          <el-table-column prop="columnA" label="统计时间（季度）">
          </el-table-column>
          <el-table-column prop="columnB" label="单个季度的“cosmic送审功能点“">
          </el-table-column>
          <el-table-column prop="columnC" label="项目实际参与人员的投入">
          </el-table-column>
          <el-table-column prop="columnD" label="超出正常范围">
          </el-table-column>
          <el-table-column prop="columnE" label="超出实际投入10%以上">
          </el-table-column>
          <el-table-column prop="columnF" label="疑似送审工作量虚报">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Pagination />
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-star-off"></i> 未上线需求参与结算
        </span>
        <el-table :data="tableDataC" border style="width: 100%">
          <el-table-column prop="columnA" label="需求上线时间">
          </el-table-column>
          <el-table-column prop="columnB" label="结算时间"> </el-table-column>
          <el-table-column prop="columnC" label="是否上线需求参与结算">
          </el-table-column>
          <el-table-column prop="columnD" label="违规信息汇总">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Pagination />
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-star-off"></i>上线延迟率过高
        </span>
        <el-table :data="tableDataD" border style="width: 100%">
          <el-table-column prop="columnA" label="统计时间（月）">
          </el-table-column>
          <el-table-column prop="columnB" label="项目名称"> </el-table-column>
          <el-table-column prop="columnC" label="需求实际上线时间（h)">
          </el-table-column>
          <el-table-column prop="columnD" label="要求上线时间(h)">
          </el-table-column>
          <el-table-column prop="columnE" label="需求延迟超占比15%">
          </el-table-column>
          <el-table-column prop="columnF" label="上线延迟率是否过高">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Pagination />
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-star-off"></i> 专家打分主观性较大
        </span>
        <el-table :data="tableDataE" border style="width: 100%">
          <el-table-column prop="columnA" label="统计时间"> </el-table-column>
          <el-table-column prop="columnB" label="项目名称"> </el-table-column>
          <el-table-column prop="columnC" label="专家打分"> </el-table-column>
          <el-table-column prop="columnD" label="平均分"> </el-table-column>
          <el-table-column prop="columnE" label="主观性较大数据">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Pagination />
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      tableDataA: [
        {
          columnA: '2020第一季度',
          columnB: '104',
          columnC: '93',
          columnD: '11.8%',
          columnE: '否',
          columnF: '否'
        },
        {
          columnA: '2020第二季度',
          columnB: '201',
          columnC: '87',
          columnD: '24%',
          columnE: '是',
          columnF: '是'
        },
        {
          columnA: '2020第三季度',
          columnB: '108',
          columnC: '187',
          columnD: '7%',
          columnE: '否',
          columnF: '否'
        }
      ],
      tableDataB: [
        {
          columnA: '2020第一季度',
          columnB: '104',
          columnC: '96',
          columnD: '8%',
          columnE: '否',
          columnF: '否'
        },
        {
          columnA: '2020第二季度',
          columnB: '108',
          columnC: '81',
          columnD: '33%',
          columnE: '是',
          columnF: '是'
        },
        {
          columnA: '2020第三季度',
          columnB: '201',
          columnC: '175',
          columnD: '14%',
          columnE: '否',
          columnF: '否'
        }
      ],
      tableDataC: [
        {
          columnA: '2020.4.30',
          columnB: '2020.7.1',
          columnC: '否',
          columnD: '是'
        },
        {
          columnA: '2020.4.30',
          columnB: '2020.7.1',
          columnC: '否',
          columnD: '是'
        },
        {
          columnA: '2020.5.1',
          columnB: '2020.7.1',
          columnC: '否',
          columnD: '是'
        }
      ],
      tableDataD: [
        {
          columnA: '2020一月',
          columnB: '北京5G开通使用',
          columnC: '1004',
          columnD: '1100',
          columnE: '否',
          columnF: '否'
        },
        {
          columnA: '2020二月',
          columnB: '天津新套餐发布使用',
          columnC: '1040',
          columnD: '800',
          columnE: '是',
          columnF: '是'
        },
        {
          columnA: '2020三月',
          columnB: '上海5G全覆盖',
          columnC: '980',
          columnD: '1000',
          columnE: '否',
          columnF: '否'
        }
      ],
      tableDataE: [
        {
          columnA: '2020.5.4',
          columnB: '需求分析系统',
          columnC: '80',
          columnD: '70',
          columnE: '否'
        },
        {
          columnA: '2020.5.20',
          columnB: '员工学习系统新版',
          columnC: '82',
          columnD: '60',
          columnE: '是'
        },
        {
          columnA: '2020.6.2',
          columnB: '内部新闻网',
          columnC: '90',
          columnD: '83',
          columnE: '否'
        }
      ],
      tableDataF: [
        {
          columnA: 'FF121435',
          columnB: '是',
          columnC: '是',
          columnD: '是',
          columnE: '2020.6.20'
        },
        {
          columnA: 'RR976231',
          columnB: '是',
          columnC: '是',
          columnD: '是',
          columnE: '2020.6.20'
        },
        {
          columnA: 'BG421864',
          columnB: '是',
          columnC: '是',
          columnD: '是',
          columnE: '2020.6.20'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.card-title {
  display: flex;
  align-items: center;
  i {
    font-size: 22px;
    margin-right: 4px;
  }
}
.pagination {
  float: right;
  margin: 10px;
}
</style>
